<!--
 * @Descripttion: 列表页tabs
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-24 10:51:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-24 13:55:21
-->
<template>
  <ul class="tabs-box">
    <li
      v-for="(item, index) in tabsList1"
      :key="index"
      class="tab-item"
      :class="{active: index === nowItem}"
      @click="changeItems(index)"
    >
      {{ item }}
    </li>
  </ul>
  <slot></slot>
  <div class="tab-content">
    <template v-if="nowItem === 0">
      <div>
        <slot name="content"></slot>
      </div>
    </template>
    <template v-if="nowItem === 1">
      <div>配置管理</div>
    </template>
    <template v-if="nowItem === 2">
      <div>角色管理</div>
    </template>
    <template v-if="nowItem === 3">
      <div>定时任务补偿</div>
    </template>
    <template v-if="nowItem === 4">
      <div>定时任务补偿</div>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'
export default defineComponent({
  props: {
    tabsList1: {
      type: Array,
      default: () => [
        '全部',
        '在售',
        '下线',
        '创建中',
        '回收站'
      ]
    }
  },
  setup() {
    const nowItem = ref(0)
    const methods = reactive({
      changeItems(index: number) {
        nowItem.value = index
      }
    })

    return {
      nowItem,
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="scss" scoped>
@import '../../../style/globle-color';
.tabs-box {
  display: flex;
  .tab-item {
    list-style-type: none;
    padding: 8px 12px;
    color: $text-gray;
  }
  .tab-item:last-of-type {
    color: $border-gray;
    margin-left: 80px;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      left: -43px;
      top: 7px;
      width: 1px;
      height: 20px;
      background-color: $border-gray;
    }
  }

  .active {
    color: $deep-blue;
    border-bottom: 2px solid #000;
    font-weight: 700;
    border-radius: 3px 3px 0 0;
  }
}
</style>